<template>
  <div :class="['msg-row', message.role]">
    <div class="avatar-container">
      <el-avatar class="avatar" :size="40" :src="avatarUrl" />
      <div class="avatar-glow"></div>
    </div>
    <div class="bubble-wrap">
      <div class="bubble">
        <!-- reasonContent 优先显示在上方 -->
        <div v-if="message.reasonContent" class="bubble-reason-content">
          <div class="deep-header" @click="showDeep = !showDeep">
            <span class="deep-icon">🧠</span>
            <span class="deep-text">深度思考</span>
            <span class="deep-toggle">{{ showDeep ? '收起' : '展开' }}</span>
            <el-icon class="toggle-icon" :class="{ rotated: showDeep }">
              <ArrowDown />
            </el-icon>
          </div>
          <transition name="deep-content">
            <div
              v-show="showDeep"
              class="bubble-markdown deep-content"
              v-html="renderMarkdown(message.reasonContent)"
            ></div>
          </transition>
        </div>
        <!-- 普通内容在下方 -->
        <div class="bubble-markdown main-content" v-html="renderMarkdown(message.content)"></div>
      </div>
      <!-- 消息状态指示器 -->
      <div class="message-time">
        {{ formatTime(new Date()) }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { marked } from 'marked'
import { ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  message: { type: Object, required: true }
})

const showDeep = ref(false) // 默认收起，优化初始体验

const avatarUrl = computed(() =>
  props.message.role === 'user'
    ? 'https://api.dicebear.com/7.x/avataaars/svg?seed=User&backgroundColor=b6e3f4'
    : 'https://api.dicebear.com/7.x/bottts/svg?seed=AI&backgroundColor=c0aede'
)

function renderMarkdown(text) {
  if (!text) return ''
  return marked.parse(text)
}

function formatTime(date) {
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}
</script>

<style scoped>
.msg-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 12px;
  width: 100%;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.msg-row.user {
  flex-direction: row-reverse;
}

.avatar-container {
  position: relative;
  flex-shrink: 0;
}

.avatar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #fff;
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.avatar-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #409eff, #67c23a, #e6a23c, #f56c6c);
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.msg-row.user .avatar-container:hover .avatar-glow {
  opacity: 0.3;
}

.msg-row.assistant .avatar-container:hover .avatar-glow {
  opacity: 0.2;
}

.bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 75%;
  min-width: 40px;
}

.msg-row.user .bubble-wrap {
  align-items: flex-end;
}

.bubble {
  padding: 16px 18px;
  border-radius: 20px 20px 8px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
  min-height: 20px;
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.bubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.msg-row.user .bubble {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  color: #ffffff;
  border-radius: 20px 8px 20px 20px;
}

.msg-row.assistant .bubble {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #2c3e50;
  border: 1px solid #e2e8f0;
}

.message-time {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bubble-wrap:hover .message-time {
  opacity: 1;
}

.msg-row.user .message-time {
  text-align: right;
}

/* 深度思考区域优化 */
.bubble-reason-content {
  margin-bottom: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #0ea5e9;
  border-left: 4px solid #0ea5e9;
  padding: 12px 14px 8px 14px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.bubble-reason-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8, #0ea5e9);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.deep-header {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #0369a1;
  font-weight: 600;
  gap: 8px;
  user-select: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.deep-header:hover {
  background: rgba(14, 165, 233, 0.1);
  transform: translateX(2px);
}

.deep-icon {
  font-size: 16px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.deep-text {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.deep-toggle {
  font-size: 12px;
  margin-left: auto;
  color: #0284c7;
}

.toggle-icon {
  transition: transform 0.3s ease;
  color: #0284c7;
}

.toggle-icon.rotated {
  transform: rotate(180deg);
}

/* 深度思考内容动画 */
.deep-content-enter-active {
  transition: all 0.4s ease-out;
}

.deep-content-leave-active {
  transition: all 0.3s ease-in;
}

.deep-content-enter-from {
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
}

.deep-content-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-5px);
}

.deep-content {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(14, 165, 233, 0.2);
}

/* Markdown 内容美化 */
.bubble-markdown :deep(pre) {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #f1f5f9;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0;
  overflow-x: auto;
  border: 1px solid #475569;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bubble-markdown :deep(code) {
  background: rgba(148, 163, 184, 0.2);
  color: #e11d48;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: 500;
}

.bubble-markdown :deep(a) {
  color: #3b82f6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.bubble-markdown :deep(a:hover) {
  border-bottom-color: #3b82f6;
}

.bubble-markdown :deep(h1),
.bubble-markdown :deep(h2),
.bubble-markdown :deep(h3) {
  margin: 12px 0 6px 0;
  font-weight: 700;
  color: #1e293b;
  position: relative;
}

.bubble-markdown :deep(h2) {
  padding-bottom: 4px;
  border-bottom: 2px solid #e2e8f0;
}

.bubble-markdown :deep(ul),
.bubble-markdown :deep(ol) {
  padding-left: 20px;
  margin: 8px 0;
}

.bubble-markdown :deep(li) {
  margin: 4px 0;
}

.bubble-markdown :deep(blockquote) {
  color: #64748b;
  border-left: 4px solid #cbd5e1;
  padding: 8px 12px;
  margin: 12px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  position: relative;
}

.bubble-markdown :deep(blockquote::before) {
  content: '"';
  position: absolute;
  top: -5px;
  left: 8px;
  font-size: 24px;
  color: #cbd5e1;
  font-weight: bold;
}

.bubble-markdown :deep(img) {
  max-width: 240px;
  border-radius: 8px;
  margin: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.bubble-markdown :deep(img:hover) {
  transform: scale(1.02);
}

.bubble-markdown :deep(table) {
  border-collapse: collapse;
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bubble-markdown :deep(th),
.bubble-markdown :deep(td) {
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  text-align: left;
}

.bubble-markdown :deep(th) {
  background: #f8fafc;
  font-weight: 600;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .bubble-wrap {
    max-width: 85%;
  }
  
  .bubble {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .avatar {
    width: 32px !important;
    height: 32px !important;
  }
  
  .bubble-markdown :deep(img) {
    max-width: 200px;
  }
}
</style>
